<script src="/js/knockout.address.js" type="text/javascript"></script>
<a class="btn primary" href="<?php echo url_for("new_pm"); ?>">Nouveau message</a>
<br/>
<!-- Folders        -->
<ul class="folders pills" data-bind="template: {name: 'folderTemplate', foreach: folders}"></ul>
<script type="text/html" id="folderTemplate">
    <li data-bind="css: {active: $data == pmViewModel.selectedFolder()}, click: function() { pmViewModel.selectFolder($data)}">
        <a href="#">${$data}</a>
    </li>
</script>
<!-- Mail grid      -->

<table class="mails cont-1" data-bind="visible: !selectedPM()">
    <thead>
        <tr>
            <th>Sujet</th>
            <th>Destinataire(s)</th>
            <th>Envoyeur</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody data-bind="template: {name: 'pmGridRow', foreach: currentPagePM}">
    </tbody>
</table>
<script type="text/html" id="pmGridRow">
        <tr data-bind="click: function(){ pmViewModel.selectedPMId(id) }">
            <td>${subject}</td>
            <td>${receivers}  </td>
            <td><a href="${from_link}">${from_pseudo}</a>     </td>
            <td>${date}</td>
        </tr>
</script>
<!-- Mail template  -->
<div class="viewPM" data-bind="template: { name: 'pmTemplate', data: selectedPM}"></div>
<script type="text/html" id="pmTemplate">
    <a class="btn danger" href="${delete_link}">Supprimer </a>
    <a class="btn primary" href="${answer_link}">Répondre</a>
    <div class="comment-cadre message-cadre">
    <div class="ext-message">
    <div class="lf">
        <div class="avatar-bubble">
            <div class="avatar" style="background-image: url(${from_avatar})"></div>
            <div class="name daniel-font"><a href="${from_link}">${from_pseudo}</a></div>
        </div>
    </div>
    <div class="rg">
        <div class="inter-message"><h2>${subject}</h2>
            <span class="italic">Envoyé à ${receivers}</span>
            <br/>
            <p class="body" data-bind="html: message">
            </p>
        </div>
        <div class="message-info">Envoyé le ${date}</div>
    </div>
    </div>
</div>
</script>

<script src="/js/MVVM/knockout.pm.js" type="text/javascript"></script>
